<template>
	<Page icon="/static/svg/index-top.svg" title="杭州市西湖区" page="Home"></Page>
	<view class="top-card">
		<view class="up-flex up-flex-items-center up-m-b-64">
			<image :src="userInfo.avatar" class="user-avatar" />
			<view class="up-m-l-48">
				<view class="font-sm opacity-sm up-m-b-16">欢迎回来</view>
				<view class="font-weight-bold font-bg up-m-b-20">黄光亮</view>
				<view class="font-base">
					<text>资深骑士</text>
					<text class="up-m-l-12">恒星组成员</text>
				</view>
			</view>
		</view>
		<view class="stats-grid">
			<view class="stat-item">
				<view class="iconfont">&#xe611;</view>
				<view class="font-weight-bold font-lg up-m-b-10">1250</view>
				<view class="font-mini opacity-sm">行驶里程</view>
			</view>
			<view class="stat-item">
				<view class="iconfont">&#xe602;</view>
				<view class="font-weight-bold font-lg up-m-b-10">12</view>
				<view class="font-mini opacity-sm">参与活动</view>
			</view>
			<view class="stat-item">
				<view class="iconfont">&#xe729;</view>
				<view class="font-weight-bold font-lg up-m-b-10">8</view>
				<view class="font-mini opacity-sm">获得徽章</view>
			</view>
		</view>
		<view class="level-progress">
			<view class="up-flex up-flex-between up-flex-items-center up-m-b-32">
				<view class="font-sm">距离下一等级</view>
				<view class="progress-points">2800/3500</view>
			</view>
			<up-line-progress :showText="false" :percentage="70" height="8" inactiveColor="rgba(255, 255, 255, 0.2)"
				activeColor="#fbbf24"></up-line-progress>
		</view>
	</view>

	<view class="quick-actions">
		<view class="section-title-small">
			快捷功能
		</view>
		<view class="actions-grid">
			<view class="action-item" v-for="(m,i) in menu" :key="i">
				<up-image src="/static/svg/add.svg" width="52px" height="52px"></up-image>
				<view class="action-name">发起活动</view>
				<view class="action-desc">发起活动</view>
			</view>
		</view>
	</view>
	<view class="recommended-activities">
		<view class="section-header up-m-b-32">
			<view class="section-title">推荐活动</view>
			<view class="more-btn">
				<up-icon label="更多" label-color="#667eea" color="#667eea" label-size="12" label-pos="left" size="12" name="arrow-right"></up-icon>
			</view>
		</view>
		<up-scroll-list indicatorActiveColor="#165dff">
			<ActItem />
			<ActItem />
			<ActItem />
			<ActItem />
		</up-scroll-list>
	</view>

</template>

<script setup>
	import Page from '@/components/Page.vue';
	import ActItem from '@/components/ActItem.vue';
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	
	onShareAppMessage(()=>{}) 
	

	const userInfo = ref({
		id: 'user_001',
		name: '骑行达人',
		avatar: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=young%20man%20wearing%20motorcycle%20helmet%20avatar%20portrait&image_size=square',
		level: 'advanced',
		levelText: '资深骑士',
		levelIcon: 'icon-star',
		totalDistance: 1250,
		totalActivities: 45,
		badgeCount: 12,
		currentPoints: 2800,
		nextLevelPoints: 3500
	})

	const menu = [{
		icon: '',
		name: '发起活动',
		desc: '组织骑行'
	}, {
		icon: '',
		name: '参加活动',
		desc: '加入骑行'
	}, {
		icon: '',
		name: '探索路线',
		desc: '发现周边'
	}, {
		icon: '',
		name: '社区交流',
		desc: '分享心得'
	}]
</script>

<style lang="scss" scoped>
	.top-card {
		margin: 24px;
		background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
		border-radius: 20px;
		padding: 32px;
		color: white;
		position: relative;
		overflow: hidden;
		box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);

		.user-avatar {
			width: 70px;
			height: 70px;
			border-radius: 50%;
			border: 3px solid rgba(255, 255, 255, 0.3);
		}

	}

	.stats-grid {

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		margin-bottom: 24px;
		position: relative;
		z-index: 1;

		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 16px;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 12px;
			backdrop-filter: blur(10px);
			transition: transform 0.3s ease;

			.iconfont {
				width: 32px;
				height: 32px;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 8px;
			}
		}
	}


	.level-progress {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 12px;
		padding: 20px;
		backdrop-filter: blur(10px);
		position: relative;
		z-index: 1;

		.progress-points {
			font-weight: 600;
			background: rgba(255, 255, 255, 0.2);
			padding: 4px 8px;
			border-radius: 6px;
			font-size: 10px;
		}
	}

	.quick-actions {
		padding: 0 24px;
		margin-bottom: 32px;

		.section-title-small {
			font-size: 14px;
			font-weight: 600;
			color: #1e293b;
			margin-bottom: 16px;
			padding-left: 10px;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4px;
				height: 14px;
				background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
				border-radius: 2px;
			}

		}

		.actions-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;

			.action-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10px;
				background: white;
				border: none;
				border-radius: 16px;
				padding: 20px 16px;
				cursor: pointer;
				transition: all 0.3s ease;
				border: 1px solid #e2e8f0;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
				position: relative;
				overflow: hidden;

				.action-name {
					font-size: 12px;
					color: #1e293b;
					font-weight: 600;
				}

				.action-desc {
					font-size: 10px;
					color: #64748b;
					font-weight: 400;
				}
			}
		}




	}

	.recommended-activities {
		padding: 0 24px;
		margin-bottom: 32px;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16px;

			.section-title {
				font-size: 18px;
				font-weight: 600;
				color: #333;
			}
		}
	}
</style>